// 引入路由和vuex
import router from '@/router'
import store from '@/store'

import { asyncRoutes } from '@/router'
// 引入一份进度条插件
import NProgress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'

const whileList = ['/login', '/404']

router.beforeEach(async(to, from, next) => {
  // 开启进度条
  NProgress.start()

  if (store.getters.token) {
    if (to.path === 'login') {
      // router.push(/)
      next('/')
    } else {
      // 如果发现当前有 token 又不是进入登录页
      // 判断一下 vuex 里面有没有用户信息,
      // 如果没有, 不用等到页面内部,直接在这里调用 vuex action 获取数据即可
      if (!store.getters.userId) {
        // 有数据就不管, 如果没数据就调用一下 action 获取数据
        const { roles } = await store.dispatch('user/getUserInfo')
        // 在这里, 就是我们获取完用户数据的地方,
        // 应该根据用户的权限给用户配置路由
        console.log('我的菜单权限')
        console.log(roles.menus)
        console.log('我的所有路由配置')
        console.log(asyncRoutes)
        // 我们有了用户权限列表
        // 有了路由列表
        // 只需要过滤路由表, 只留下name存在于权限列表的配置即可
        const myRoutes = asyncRoutes.filter(item => roles.menus.indexOf(item.name) > -1)
        // 在所有路由都添加完毕以后, 动态增加一个 404 重定向, 保证所有其他地址, 都是 404
        myRoutes.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(asyncRoutes)
        // 如果是添加路由, 由于 vue-router 的缺陷
        // 需要在同一个地址在跳转一次才行
        next(to.path)
      } else {
        // 如果不是添加路由, 直接放行
        next()
      }
      next()
    }
  } else {
    if (whileList.indexOf(to.path) > -1) {
      next()
    } else {
      next('/login')
    }
  }
  // 修复手动切换页面地址或刷新时无法停止进度条的问题
  NProgress.done()
})

router.afterEach(() => {
  NProgress.done()
})
